ContentsTitle
Contents

The WebPen PRO edition includes:

-  WinCopy screen capture

-  GifWeb Transparent GIF backgrounds

-  Hotspots Imagemap Tool

These programs can be accessed from the Tools menu and they have their own online Help.

About

Tutorial

Introduction to HTML

Open New, Open File

Create and Modify HTML Files

Edit the Files

Spell check

Hypertext Links

Background

Tables

Mailto Forms

Frames

Save the File, Print

View the Web Page

Upload the HTML File to the Server

Don't forget to use these often overlooked features:

Click on right mouse button for a popup menu of the most often used functions.

If you work on several forms, choose Tile from Windows menu, or click on Rotate button.


Copyright, Registration, Technical Support

This system was developed by Informatik Inc, P.O. Box 868, Devon, Pennsylvania 19333.  For information on program modifications, systems integrations and custom applications, please contact Informatik Inc.

This is a copyright-protected shareware product.  If, after review and evaluation, you like the software, please register and pay the registration fee.  Upon registration and payment of the registration fee, Informatik Inc will send you the latest master diskette, a print file of the User Guide and a registration certificate.  Registered users will receive lifetime technical support and are entitled to free software upgrades during first year.  Shareware is based on trust, and we hope that all users will register.

To register

From the About menu, choose Registration, Copyright and follow the instructions.

To obtain technical support

From the Help menu, choose Technical Support and follow the instructions.

© 1995-1996 Informatik Inc

All rights reserved.

WebPen is a trademark of Informatik Inc.


Introduction to HTML

Web browsers and navigators read HTML files and translate the text, tags, codes and references contained in the HTML files to multi-media displays.  HTML files are plain ASCII text files made up of a collection of some simple and some complex codes and tags.

WebPen helps you create the correct syntax and structure of the HTML document.  It is important, however,  that you are somewhat familiar with the HTML concept before you attempt to build the first HTML file.  You are familiar with HTML if you can understand the general meaning of an HTML script.  Reading a HTML script is similar to reading the 'reveal code ' of a word processing document.   It is suggested that you read a book about HTML, or at least read the document 'A Beginner's Guide to HTML'  published by the National Center for Supercomputing Applications, available via the Internet (search for Beginner, Guide, HTML keywords).

Not all features included in the WebPen are supported by all web browsers and navigators.  If a function does not work, it probably means that your browser does not support the feature.

Structure of the HTML document

The HTML document uses paired ON and OFF tags to specify attributes and conditions.  For example, to specify a certain  text to be displayed bold, a ON tag (<B> is placed in front of the bolded text and a OFF tag (</B> is placed at the end of the bolded text.  OFF tags are identified by the 'slash' sign (/).

All HTML document must start with a <HTML> tag and end with a </HTML> tag.  The document is sub-divided into two sections: the Heading Section (<HEAD> .....</HEAD>) and the Body Section (<BODY> .......</BODY>).

The Heading Sections contains the Title (>TITLE> ......</TITLE>). The Body Section contains the substance of the document.

The structure thus looks like this:

<HTML>

        <HEAD>

                <TITLE>

                        The title .....

                </TITLE>

        </HEAD>

        <BODY>

                Text......

                Text .....

                Text .....

        </BODY>

</HTML>

Spaces, tabs, carriage returns are ignored by the browser software (except for preformatted text).   All line breaks, paragraph breaks, indentations, etc. must be specified by tags.  To insert a line break (CR), press Function Key 9 or choose Line Break from the Insert menu.


Open New; Open File
Open New, Open File

To start a new HTML file, choose New from the File menu.  The system creates the basic structural tags for the HTML document.

To open an existing HTML file, choose Open from the File menu.  In the dialog box, select the drive, directory and file and press OK.


Create and Modify HTML Files

There are two methods of entering HTML text and elements:

a) type in the editor window, b) inserting and c) formatting.

The following elements are inserted:

Line breaks

Paragraphs

Headings

Double line breaks (equivalent to a new paragraph)

Horizontal rules

  	Hypertext references and anchors

Graphics

Colored bullets

Copyright notice

e-mail prompt

Signature section

'Return to Top'

Current date

Special characters

Background

WebPen link

Tables

Mailto Forms

Frames

The following elements are typed in the edit window, highlighted with the cursor and then formatted:

Bold, underline, italic, superscript, subscript

Emphasis

Paragraphs

Blink

Preformatted text

Lists (numbered and un-numbered)

Address block

Extended Blockquote (indents)

Centered

Current date

Comments (invisible author's commentst)

Remove tags

Insert HTML Elements

The basic structural <HTML>, <HEAD>, <TITLE> and <BODY> tags are automatically inserted by the system when a new document is created.  You may of course edit these tags.

To insert other elements, such as horizontal rules, graphics, etc.:

1.	Place the insertion point at the exact spot where you want to insert the element.

2.	From the Insert menu, select the item.

3.	In the prompts, select the options and enter the text values as appropriate.  If you have highlighted some text before choosing Insert, the highlighted text will be shown as a default entry.

4.	Choose OK.

Format HTML elements and text

To create lists, indentations (extended quote blocks), address blocks, paragraphs, pre-formatted text, text attributes, etc.:

1.	Type the text in the editor window.

2.	Highlight the text with the mouse.

3.	From the Format menu, select the formatting action.

4.	If required, specify the options and press OK.

To insert a line break (CR), press Function Key 9, click on the Break button,  or choose Line Break from the Insert menu.  HTML ignores keyboard carriage returns and tabs.

Search, Replace

WebPen includes a simple word search function.  To search for a text string in the current document, choose Search from the Edit menu, type the word you are searching, specify the case sensitivity and press OK.

For the search and replace function, choose Replace from the Edit menu.  In the Text Replace window, specify the 'search' and 'replace' strings, choose the case sensitivity and press OK.

Graphic Images

From the Insert menu, choose Graphic Image.  The Graphics window is displayed.  Press on Browse and select the picture (click it).  Optionally, change the position, size and attributes of the picture and the location of the accompanying text, or keep the defaults.  All measurements are in pixels. There are many options, and you will need to experiment with them.  In the Alternate box, type the description that you want to show in lieu of the picture in cases where the web browser does not support pictures.  Press OK.

The specifications for the position and size of graphics and the alignment of the accompanying text is as follows (all measurements are in pixels):

To print a single line of text at the bottom right-side of the image, make no alignment selection.  This is the default setting.

To print a single line of text at the top right-side or middle right-side of the image, select Right or Middle from the Text Alignment list.

To place the image at the left side of the page and wrap (several lines of) text to the right of the image, select Left from the Text Alignment list.

To place the image at the right side of the page and wrap (several lines of) text to the left of the image, select Right from the Text Alignment list.

Lists

There are several formats of lists.  To create a list, type the text in the editor window.  Then, highlight the text of the list and  choose List from the Format menu.

You can also create nested lists.  To create a nested list, first create the first level of list items, as indicated above.  Then, place the cursor at the location where you want to insert the nested list and create another list as indicated above.

The colored bullet lists are created one line at the time.  To create a colored bullet, choose Colored Bullet from the Insert menu.  In the Colored Bullet window, type the text, select a color and press OK.  You may also type the text in the edit window.

Preformatted Text

Sometimes you may wish to insert preformatted text.  Preformatted text will be displayed by the web browser 'as is' with tabs, carriage returns, etc. honored.  To create Preformatted Text, type the text in the editor window (or paste it in).  Highlight the text and choose Preformatted Text from the Format menu.

Paragraphs

Web browsers ignore carriage returns.  To create a paragraph, type the text, highlight it and choose Paragraph from the Format menu.  The same effect can also be accomplished with a double line break (<br> <br>).

Blockquotes, Indentations

Web browser do not honor tab or indents.  To create an indented text, you must create Blockquotes.  Type the text in the editor window, highlight it and select Blockquote from the Format menu.

Horizontal Rules, Lines

Most web pages make (too) extensive use of horizontal rules.  To create a horizontal rule, place the insertion point at the position where you want to create the rule and choose Horizontal Rule from the Insert menu.  In the Horizontal Rule window, select the size (thickness) and the width of the rule.  All measurements are in pixels or percent.  The window indicates the conversion factors for your screen.  Press OK.

Forms

For more advanced applications, you may want to add a fill-out form on a web page.  The form can include text boxes, radio buttons, pull-down lists.  The web audience fills out the form and the web browser automatically transmits the data back to the web owner via the built-in e-mail system.

To build a form, place the insertion point in the HTML document and choose Mailto Form from the Insert menu.  In the Mailto Form window, specify your email address (first time only) and choose from one of several field types, such as text box, check box, etc.  Most field types require a Identifier Name (Topic).  The response will come back to you under that identifier label.  Complete all the required specifications and click on OK.  The Mailto code is inserted in your HTML document.  Repeat the process for the other field types.

Formes can become quite complex.  It is recommended that you read an authoritative book on the subject.

Tables

To create a table, place the insertion point in your HTML document and choose Tables from the Insert menu.  In the Tables window, specify the number of columns, table width (as a percent), Border width in pixels, Cell Padding in pixels (text offset), and Cell Spacing in pixels (space between the cells).  Type the values in the table grid, and optionally specify the text alignment in the pull-down list (left, right, center).  If the table must be centered on the screen, click on the Centered check box.  Press OK and the table code will be inserted to your HTML document.

To display an existing table, highlight the table code in the HTML document starting from <TABLE> and ending with </TABLE> before you open the table window.  You can also copy a table from most spreadsheets.  Simply highlight the cells in your spreadsheet and copy it to the Windows clipboard.  Then, from the Edit menu in the Table window, choose Paste from Spreadsheet.

To remove a row or to insert a new row, choose the appropriate option from the Edit menu.

Frames can become quite complex.  It is recommended that you read an authoritative book on the subject.

Frames

WebPen features an easy-to-use method of producing basic frames.  Start a new HTML document and choose Frames from the Insert menu.  The Layout Document window appears.  The frame is created by splitting a frame horizontally or vertically, once or several times.  Click on the frame that you want to split (there is not need for this step when you split the initial framel).  The frame is highlighted in white.  From the controls on your left, specify whether you want to split the frame horizontally or vertically and indicate the number of frames.  Click on the Split button.  Optionally, type the URL in the newly created cells.  Repeat the process to create further splits.  Press OK.

Frames can become quite complex.  It is recommended that you read an authoritative book on the subject.

There are other options for advanced applications, and these are outside the scope of this user guide.  Some functions may not work on all web browsers.


Edit Files

The primary purpose of the system is to create HTML elements with the correct syntax.  If you need to change an existing element, you should edit simple changes directly in the edit window by overwriting the original text.  Be careful not to damage the syntax.  Major modifications are best made by deleting the old text and recreating the element.


View the Web Page

When you have completed the HTML document, you will be eager to view the result of your creation.  The HTML document can be viewed with any web browser, such as the Netscape Navigator.

1.	Save the document.  From the File menu, choose Save As (or Save).

2.	Start the web navigator or browser.  You can open the navigator off-line, without being connected to the Internet.  To open the browser off-line, choose Open Browser from the Browser menu.  The first time, the system will ask you to specify the browser's executable file name.  Once the browser is running, you can activate it by pressing ALT+Tab once or several times, or you can assign a shortcut key (see Windows user guide).  The off-line mode may not be available with certain browsers.

3.	From the browser's File menu, choose Open File (or Open Local) and select the HTML file and press OK, or choose Reload from the View menu. .


Save the File
Save the File, Print

When you have completed the editing, you should save the file.

From the File menu, choose Save As for a new file and specify the file number with a .HTM extension.  If you have previously saved the file, choose Save from the File menu.

To print the file, choose Print from the File menu.  Optionally, select the printer from the Setup Option. Press OK.


Upload the HTML File to the Server

Once you are happy with the HTML document, you must upload the file to your web server.  Please consult with the web site operator about the methods available for uploading or transferring your HTML file.  Please ensure that all relating files, especially the graphic files are also transferred to the correct directory on your web server.  If the document uses colored bullets, these graphic files must also be uploaded.  The names of the graphics files can be found in the raw HTML text (The bullet graphic files are named blue.gif, red.gif, etc).

It is important that the name of the main home page be INDEX.HTML.  If you have used another name for the main page, you can change the name directly on the web server.  Also, some web servers require the extension names of the HTML files to be HTML (not HTM, the extension used on your Windows system).  If so, you can rename the files directly on the web server.

Your server my provide a facility to add a hit counter.  Contact your web site operator for instructions.

You should now try to access the remote web server.  If some of the linked items or graphics do not appear, verify the pathname of the links.

Finally, it is a good idea to submit your web page with the major search engines.  An easy way to do so is via Submit-It (www.submit-it.com/).


Tutorial

1.	From the File menu, choose New.  The Title window appears.

2.	In the Title window, enter a meaningful title.  The words in the title text will be used by many search engines for their index.  Press OK.  The edit window displays the basic HTML structure and the text of the title.

3.	Ensure that the insertion point is placed just below the <BODY> tag.

4.	From the Insert menu, choose Heading (the first item in the menu.  The Heading window is displayed.  Type a heading.  You may specify a size and an alignment or keep the defaults.  Press OK.

5.	From the Insert menu, select Horizontal Rule.  The Horizontal Rule window is displayed.  You may change the thickness of the line, the length and the alignment.  Generally, you will keep the default.  Press OK.

6.	Now we want to create a list.  In the edit window, type a list of items, let's say four lines.  Highlight the listed items and choose List from the Format menu (not Insert menu).

7.	Now we will insert a picture. There are already some pictures in the directory, so we can proceed.  From the Insert menu, choose Graphic Image.  The Graphics window is displayed.  Press on Browse and select the picture (click it).  Optionally, change the position, size and attributes of the picture and the location of the accompanying text, or keep the defaults.  All measurements are in pixels.  There are many options, and you will need to experiment with them.  In the Alternate box, type the description that you want to show in lieu of the picture in cases where the web browser does not support pictures.    Press OK.

8.	To insert a line break (CR), press Function Key 9, click on the Break button, or choose Line Break from the Insert menu.  HTML ignores the regular keyboard carriage returns.

9.	Now we will sign off.  From the Insert menu, choose Author Signature.  The Author Signature window appears.  Enter your e-mail address and press OK.

The Insert menu also has functions for the copyright notice and the 'Return to Top'.  Try them out.

10.	Now we must save the document.  From the File menu,  choose Save As.  Specify the file name (the extension name must be htm).  Press OK.

11.	Start up your Web  Browser Navigator.  From the File menu of the browser, choose Open File (or Open Local, or equivalent).  Your masterwork is displayed.


Hypertext Links

Web pages can be linked to other web pages, internal or external.  You create a link to another page, a location on the current web document or another Internet service by marking the object as 'hypertext'.  Both text and pictures can be hypertext objects.

To link to another web page:

1.	In the editor window, place the insertion point where you want to insert the hypertext.

2.	From the Insert menu, choose Hypertext Link.  The Hypertext Link window is displayed.

3.	In the first box, specify the path of the linked page, normally the URL.  The full path must be entered if the linked page is not in the same directory as the linking page.  If the linked page is in the same directory, you need only enter the file name.

4.	Optionally, in the second field, specify the Anchor (Name).  The anchor is a marked location on the linked page.  Please make sure that the anchor  exists on the linked page.

To create an anchor, place the cursor at the exact spot where you want to insert the reference, then choose Anchor (Name) from the Insert menu.  In the Anchor window, enter the reference name and press OK.

5.	In the third field, enter the visible text that will become the hypertext.

6.	Press OK.

To link to a spot on the same web page

Proceed as above, but leave the first field blank.

To make a hypertext picture

1.	Create a picture (From the Insert menu, choose Graphic)

2.	In the edit window, with the cursor, highlight the entire specification relating to the picture.  Make sure that you exclude any <br> tags.

3.	Proceed as above, but do not change the Picture specifications in the third field.


Background

The newer versions of browsers support colored and patterned backgrounds.  You can also specify the color of the text, the links, the active links and the visited links.  The color specification applies to the entire web page.

The background pattern is created by a small GIF file that is repeated to fill the entire screen.  The GIF file should exist in the WebPen's directory and should be uploaded to the web server together with the HTML file.

To specify a colored background, colored text and links

1.	From the Insert menu, choose Background.

2.	Press the appropriate Browse buttons.  The color palette window is displayed.

3.	Select the color and press OK.

4.	To select a custom color in the color palette window, a) click on Define Custom Colors, b) select one of the basic colors, c) from the color spectrum or the Red-Green-Blue fields, select the customized color, d) press the Add to Custom Colors button, and,  e) choose OK.

To specify a background pattern

1.	From the Insert menu, choose Background.

2.	Click on the Browse button and select the GIF file.

3.	Choose OK.

4.	When uploading the HTML file, make sure that the GIF file is also uploaded to the same directory, or is properly linked.


Speller

WebPen features a OLE link to MS Word.  If you have a recent version of MS Word, you can spell-check the HTML document with the Word spell subsystem.

The OLE link requires several DLL and other files in the Windows\System directory.  In all likelihood these files already exist in your Windows\System directory; if not, copy them from the installation diskette.  If you have any difficulties obtaining the files, please contact Informatik at info@infornmatik.com.  The following files must be in the Windows\System directory:

COMPOBJ.DLL

OLE2.REG

OLE2.DLL

OLE2CONV.DLL

OLE2DISP.DLL

OLE2NSL.DLL

OLE2.PROX.DLL

STORAGE.DLL

VBOA300.DLL

You must also ensure that the SHARE.EXE command line exists in your AUTOEXEC.BAT file (not required if you are running Windows for Workgroups).


Tables

To create a table, place the insertion point in your HTML document and choose Tables from the Insert menu.  In the Tables window, specify the number of columns, table width (as a percent), Border width in pixels, Cell Padding in pixels (text offset), and Cell Spacing in pixels (space between the cells).  Type the values in the table grid, and optionally specify the text alignment in the pull-down list (left, right, center).  If the table must be centered on the screen, click on the Centered check box.  Press OK and the table code will be inserted to your HTML document.

To display an existing table, highlight the table code in the HTML document starting from <TABLE> and ending with </TABLE> before you open the table window.  You can also copy a table from most spreadsheets.  Simply highlight the cells in your spreadsheet and copy it to the Windows clipboard.  Then, from the Edit menu in the Table window, choose Paste from Spreadsheet.


Frames

WebPen features an easy-to-use method of producing basic frames.  Start a new HTML document and choose Frames from the Insert menu.  The Layout Document window appears.  The frame is created by splitting a frame horizontally or vertically, once or several times.  Click on the frame that you want to split (there is not need for this step when you split the initial framel).  The frame is highlighted in white.  From the controls on your left, specify whether you want to split the frame horizontally or vertically and indicate the number of frames.  Click on the Split button.  Optionally, type the URL in the newly created cells.  Repeat the process to create further splits.  Press OK.

Frames can become quite complex.  It is recommended that you read an authoritative book on the subject.


Forms, Mailto Forms

For more advanced applications, you may want to add a fill-out form on a web page.  The form can include text boxes, radio buttons, pull-down lists.  The web audience fills out the form and the web browser automatically transmits the response back to the web owner via the built-in e-mail system.

To build a form, place the insertion point in the HTML document and choose Mailto Form from the Insert menu.  In the Mailto Form window, specify your email address (first time only) and choose from one of several field types, such as text box, check box, etc.  Most field types require a Identifier Name (Topic).  The response will come back to you under that identifier label.  Complete all the required specifications and click on OK.  The Mailto code is inserted in your HTML document.

Repeat the process for the other field types.

Forms can become quite complex.  It is recommended that you read an authoritative book on the subject.